iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
自我挑戰組

設計麻瓜系列 第 5

005-元件名稱_2

  • 分享至 

  • xImage
  •  

關於上篇提到的元件,對我而言,屬於在討論階段,會比較經常拿出來討論的元件。真正在實作以及管理畫面時,這類型的元件由於外觀上重複性高,使用 figma 製作畫面時,強大的元件管理功能,可以讓我快速的使用同一個母元件修改成我想要的樣子,使用在我想要呈現的畫面上。

而有些像是功能按鈕的 icon,不同狀態的 button ,不同顯示方式的 card 等,一開始對於這些名稱不了解時,除了在搜尋參考資料時會遇到一些困難之外,在想要好好整理元件時,自己也會瞬間卡住。更合況這些元件通常是需要多人協作時,不好好定位這些名稱,未來都會遇到一定程度上的問題。因此此篇算是延續上篇的續集,繼續介紹更多經常使用到的元件名稱。

1.Badges - 會讓強迫症患者牙起來的紅點點,我以前很常使用「notification 的那個紅點點」這種模糊的字眼與同事溝通,有些同事就會露出狐疑的眼神。後來找到了他的名稱,也方便我在管理元件時,讓他可以跟其他真正的 notification 做出區隔。

2.Card - 算是我目前所有元件中,內容最多的元件開頭了。由於外形像一張一張的卡片,常被用來作為簡略敘述這區塊的功能。而因為這類型的元件其實用起來非常的廣泛,我自己也還在尋找最佳的命名方式,讓我在這部分的元件在管理時能夠有更好的做法。

3.Checkbox - 通常為外型通常為方形外框,但也是有看過很多設計師使用了不一樣的表現形式來呈現這類型的元件。而這個元件很常跟 Radio button 搞混,最大的差別就是 checkbox 可以多選,但 radio button 不行。

4.Dropdown - 下拉選單,通常我會設定一長串的 dropdown ,利用 figma 眼睛開關的功能,來達到各種不同長度的下拉選單都可以共用同一組母元件。

5.Popovers - 提示說明。有另外一種被稱作 Tooltips 的提示說明,後面會提到。主要的功能用途是:Popovers 的使用涵蓋比較多功能,像是可以有主副標的出現,可互動的按鈕。

6.Radio button - 單一選擇時使用的元件按鈕,外型上通常為圓圈內含一個圓形的點點,這類型的元件就比較少被修改成其他樣式的方式顯示了。

7.Sliders - 滑桿,很常被用來作為價格區間,亮度等調整的元件。

8.Switch - 像是電燈按鈕的開關功能,在四處都很常看到他。

9.Toast - 短時間出現的文字提示,屬於會自動消失的類型,有時候也會附帶著像是驚嘆號等 icon 的顯示。

10.Tooltips - 導引泡泡/教學泡泡。其實不太確定中文該怎麼形容這個元件,我自己比較常使用泡泡這個詞來形容它。在網路上找到的說明文章裡,把 Tooltips 涵蓋在 Popovers 裡面。這個元件很常在第一次登入 App ,或是在 App 有新功能時,為了加速使用者了解功能用途時,會使用的一種提示作法。


上一篇
004-元件名稱
下一篇
006-元件狀態
系列文
設計麻瓜15
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言